<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="core" %>
<%@ taglib prefix="fmt" uri="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>气泡讨论板块</title>
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/css/icons.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/css/style1.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/css/style2.css" />
		
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	 	<script type="text/javascript" src="<%=path%>/page/front/disc/bianji/src/js/libs/jquery-1.10.2.min.js"></script>
		<!-- Loading Bootstrap1 -->
    	<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/bianji/style.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/bianji/src/js/jquery.notebook.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/bianji/css/default.css" />
        <link rel="stylesheet" type="text/css" href="<%=path%>/page/front/disc/bianji/css/component.css" />
        <script src="<%=path%>/page/front/disc/bianji/js/modernizr.custom.js"></script>
        <script src="<%=path%>/page/front/them/reconnecting-websocket.js"></script>
		<style type="text/css">
            #submit{
            	width:95%;
            	margin:0 auto;
            	height:50px;
            	margin-top:20px;
            }
            #select{
            	margin-top:10px;
            	float:right;
            }
            #edit{
            	width:100%;
            }
            #use{
            	width:100%;
            }
            div{ word-wrap: break-word; word-break: normal;}
           
            
            #top{
            	width:100px;
            	height:50px;
            	margin:10px auto;
            }
            #top a{
            	color:#fff;
            	border:0px;
            }
            #top a:hover{
            	color:#c55500;
            	background:none;
            	border:1px;
            }
            .taolunban{
            	width:100%;
            }
             .tupian{
            	width:100px;
            	height:110px;
            	margin-top:-16px;
            	margin-right:-16px;
             	position:absolute;
             	right:-100px;
            	z-index:22;
            }
            .tupian1{
            	width:100px;
            	height:110px;
            	margin-top:-15px;
            	margin-left:-15px;
             	position:absolute;
             	left:-106px;
            	z-index:22;            
            }
            .tu{
            	width:72px;
            	height:72px;
            	margin:0 auto;
            }
            .tu a{
            	background:none;
            	border:0px;
            }
            .neirong{
            	width:100px;
            	height:40px;
            	text-align:center;
            	font-size:14px;
            	color:#fff;
            	line-height:13px;
            }
            .img{
            	-webkit-border-radius:72px;
              	-moz-border-radius:72px;
              	border-radius:72px;
            }
            .img:hover{
            	margin-top:-3px;
            	margin-left:-3px;
            	width:76px;
            	height:76px;
            	-webkit-border-radius:76px;
              	-moz-border-radius:76px;
              	border-radius:76px;
            }
            .zan{
            	width:30px;
            	height:40px;
            	margin-top:40px;
            	margin-left:-14px;
             	position:absolute;
            	z-index:32; 
            	color:#c55500;
				font-size:12px;
				text-align:center;
            }
            .zan1{
            	width:30px;
            	height:40px;
            	margin-top:38px;
            	margin-left:85px;
             	position:absolute;
            	z-index:32; 
            	color:#c55500;
				font-size:12px;
				text-align:center;
            }
        </style>
         
</head>



<body>
	<c:if test="${pageif==1}">
		<div id="top"><a href="../them/themone.html?id=${one.drId}&p=${page+10}">查看更多</a></div>
	</c:if><c:if test="${pageif==0}"><br/><br/></c:if>
	<div class="container">
		<input type="hidden" id="drid" value="${one.drId}"/>
		<div class="content">		<div class="taolunban"></div>
			<c:forEach items="${one.discuss}" var="all">
				<div class="taolunban">
					<c:if test="${uid != all.usersUId}">
						<div class="triangle-right left">
							<div class="tupian1"><div class="zan1">关注<br/><span id="dianzan${all.dsId}">${all.suport}</span></div>
								<div class="tu">
									<a href="javascript:function()" onclick="dianzan(${all.dsId});">
										<c:if test="${all.users.image.imLoclhost!=null}">
										<img class="img" height="72"  id="img${all.dsId}"  title="<c:if test="${all.sc==0}">关注</c:if><c:if test="${all.sc==1}">取消关注</c:if>
										" width="72" src="../page/upload/images/${all.users.image.imLoclhost}"/>
										</c:if>
										<c:if test="${all.users.image.imLoclhost==null}">
										<img class="img" height="72"  id="img${all.dsId}"  title="<c:if test="${all.sc==0}">关注</c:if><c:if test="${all.sc==1}">取消关注</c:if>
										" width="72" src="../page/upload/images/123456.jpg"/>
										</c:if>
									</a>
								</div>
								<div class="neirong">${all.users.uName} <br/> <font style="font-size:12px;"><fmt:formatDate value="${all.dsTime}" pattern="yy-MM-dd HH:mm:ss" /></font></div>
							</div>
							${all.dsContent}
						</div>
					</c:if>
					<c:if test="${uid == all.usersUId}">
						<div class="triangle-right-demo demo " id="use" >
							<div class="triangle-right right">
								<div class="tupian"><div class="zan">关注<br/><span id="dianzan${all.dsId}">${all.suport}</span></div>
									<div class="tu">
										<a href="javascript:function()" onclick="dianzan(${all.dsId});">
											<c:if test="${all.users.image.imLoclhost!=null}">
											<img class="img" id="img${all.dsId}" title="<c:if test="${all.sc==0}">关注</c:if><c:if test="${all.sc==1}">取消关注</c:if>
											" height="72"  width="72" src="../page/upload/images/${all.users.image.imLoclhost}"/>
											</c:if>
											<c:if test="${all.users.image.imLoclhost==null}">
											<img class="img"  id="img${all.dsId}" title="<c:if test="${all.sc==0}">关注</c:if><c:if test="${all.sc==1}">取消关注</c:if>
											" height="72" width="72" src="../page/upload/images/123456.jpg"/>
											</c:if>
										</a>
									</div>
									<div class="neirong">${all.users.uName} <br/> <font style="font-size:12px;"><fmt:formatDate value="${all.dsTime}" pattern="yy-MM-dd HH:mm:ss" /></font></div>
								</div>
								${all.dsContent}
							</div>
						</div>
					</c:if>
				</div>
			</c:forEach><br/>
			
	    	<div class="editor" id="edit">
			</div>
			<div id="submit">
		    	<div id="select">
					<c:if test="${yonghu==1}">
					<button class="btn btn-primary" id="add">发表</button>
					</c:if>
					<c:if test="${yonghu==0}">
					<a class="btn btn-primary" href="../../login/login.html">登录</a>
					</c:if>
		    	</div>
		    </div><br/><br/><br/><br/><br/>
		</div>
	</div>
	<nav id="bt-menu" class="bt-menu">
		<a href="#" class="bt-menu-trigger">Menu</a>
		<ul>
			<li><a href="../them/index.html" >搜索</a></li>
			<c:if test="${yonghu==1}">
			<li><a href="../them/zhuti.html" >我的主题区</a></li>
			<li><a href="../them/new.html" >创建主题区</a></li>
			</c:if>
			<li><a href="../index/index.html" >返回首页</a></li>
		</ul>
	</nav>
		
	</body>
	<script src="<%=path%>/page/front/disc/js/classie.js"></script>
	<script src="<%=path%>/page/front/disc/js/borderMenu.js"></script>
	<!-- 编辑器 -->
	 <script type="text/javascript" src="<%=path%>/page/front/disc/bianji/src/js/libs/jquery-1.10.2.min.js"></script>
      <script type="text/javascript" src="<%=path%>/page/front/disc/bianji/src/js/jquery.notebook.js"></script>
      <script type="text/javascript">
          $(document).ready(function() {
              $('.editor').notebook({
                  autoFocus: true,
                  placeholder: '我也来说一句'
              });
//           	  var d=document.getElementsByTagName('bold');
//           	  d.style.margin="0";
				
          });
          
      </script>
      <script src="<%=path%>/page/front/disc/bianji/js/ytmenu.js"></script>
     
		 <script type="text/javascript">
		   	var drid = eval(document.getElementById("drid")).value;
		   	var ws = new ReconnectingWebSocket("ws://"+window.location.host+"/wkxx/theme.ws");
		   	var uid = ${uId};
		   	var check = 0 ;
		   	if(ws!=null){
				ws.onopen = function(evt) {
					console.log("websocket open"); 
					ws.send(drid);
					check=1;
				};
				ws.onmessage = function(msg) {
					check=1;
					//alert(msg.data);
					var jsonstring = msg.data;
					var jsons = eval('(' + jsonstring + ')');
					var myDate = new Date();
					var time = myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
					var imgurl = jsons.users.image.imLoclhost;
					if(imgurl==null){
						imgurl = "123456.jpg";
					}
					var classlei ;
					var idlei;
					var zan ;
					if(uid == jsons.usersUId){
						zan = "zan";
						idlei = "tupian";
						classlei="triangle-right right";
					}else{
						zan = "zan1";
						idlei = "tupian1";
						classlei="triangle-right left";
					}
					var html = "<div class=\"taolunban\">"+
									"<div class=\""+classlei+"\">"+
										"<div class=\""+idlei+"\"><div class=\""+zan+"\">关注<br/><span id=\"dianzan"+jsons.dsId+"\">0</span></div>"
										+"<div class=\"tu\"><a href=\"javascript:function()\" onclick=\"dianzan("+jsons.dsId+");\">"+
										"<img class=\"img\" id=\"img"+jsons.dsId+"\" title=\"关注\" height=\"72\"  width=\"72\" src=\"../page/upload/images/"+jsons.users.image.imLoclhost+"\"/></a>"
										+"</div><div class=\"neirong\">"+jsons.users.uName+" <br/> <font style=\"font-size:12px;\">"+time+"</font></div></div>"+
							    		jsons.dsContent
									+"</div></div>";
									
	
					$(".taolunban:last").after(html);
				};
				ws.onclose = function(evt){
					check=0;
					console.log("websocket close"); 
				};
		   	}
			//表单提交采用json提交
			$("button#add").click(function(){
		          var obj={
						"dsContent":$("#edit").html(),
						"udiscusserDrId":$("#drid").val()
					};
		          if($("#edit").html()!=null){
						$.post("../them/addyes.json",obj,function(json){
							if(json == 1){
						        alert("发表成功！");
								if(check==0){
									location.reload();
								}
							}else{
						        alert("发表失败！");
							}
						});
		          }else{
		        	  alert("内容不能为空！");
		          }
 			});
			//表单提交结束
			
			//关注
			function dianzan(dsid){
				var zhan = document.getElementById("dianzan"+dsid);
				$.post("../them/zan.json?id="+dsid,function(json){
					if(json==0){
						alert("操作失败！");
					}else if(json==1){
						document.getElementById("img"+dsid).title = "关注";
						zhan.innerHTML = zhan.innerHTML*1-1; 
					}else{
						document.getElementById("img"+dsid).title = "取消关注";
						zhan.innerHTML = zhan.innerHTML*1+1; 
					}
				});
			};
		</script>  
	
</html>  